<script setup>
import { ArrowRight  } from '@element-plus/icons-vue'
import { computed } from 'vue'

const props = defineProps({
  iconSrc: String,
  mainTitle: String,
  subTitle: String,
  groupTitle: String,
  buttonText: String,
  imageSrc: String,
  firstGroup: Array,
  secondGroup: Array,
  footerText: String,
  isSwitched: Boolean,
  isAI: Boolean
})
const isShow = computed(() => {
  if (!props.isAI) return true
  if (props.isSwitched && props.mainTitle === '货') return false
  if (!props.isSwitched && props.mainTitle === '人') return false
  return true
})
</script>
<template>
  <div class="detail-box">
    <div class="detail-box-header">
      <div class="detail-header-tittle">
        <img :src="iconSrc" alt="" />
        <span class="tittle">{{ mainTitle }}</span>
        <span class="tittle-content">{{ subTitle }}</span>
      </div>
    </div>

    <div v-if="isShow" class="detail-box-body">
      <div class="detail-body-header">
        <div class="detail-body-tittle">{{ groupTitle }}</div>
        <div class="detail-body-button">
          <el-button size="small" type="primary" plain>
            {{ buttonText }}
            <el-icon class="el-icon--right"><ArrowRight /></el-icon>
          </el-button>
        </div>
        <div class="detail-body-img">
          <img :src="imageSrc" alt="" />
        </div>
      </div>

      <div class="detail-body-data">
        <div class="detail-data-first">
          <div class="store-data" v-for="(item, i) in firstGroup" :key="'first-' + i">
            <div class="data-name">{{ item.name }}</div>
            <div class="data-value">{{ item.value }}</div>
          </div>
        </div>
        <div class="detail-data-second">
          <div class="store-data" v-for="(item, i) in secondGroup" :key="'second-' + i">
            <div class="data-name">{{ item.name }}</div>
            <div class="data-value">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="isShow" class="detail-box-footer">
        <div v-if="mainTitle === '货'" class="detail-footer-button">
            <el-button type="warning" size="small" round>{{ footerText }}</el-button>
        </div>
        <div v-else-if="mainTitle === '人'" class="detail-footer-button">
            <el-button type="success" size="small" round>{{ footerText }}</el-button>
            <el-button type="warning" size="small" round>{{ footerText }}</el-button>
        </div> 
    </div>

    <div v-else class="detail-body-isAI">
      <div class="detail-body">
        <img src="@/assets/isAI.png" alt="">
        <div>点击右方匹配按钮，立即生成方案~</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.detail-box{
  flex: 1;
  display: flex;
  flex-direction: column;
  .detail-box-header{
    flex: 2;
    .detail-header-tittle{ 
    margin-left: 30px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    img{
      width: 25px;
      height: auto;
    }
    }
  }
  .detail-box-body{
    flex: 8;
    display: flex;
    flex-direction: column;
    .detail-body-header{
      flex: 5;
      display: flex;
      flex-direction: column;
      .detail-body-tittle{
        margin-top: 9px;
        margin-left: 176px;
        flex: 1;
        font-size: 14px;
        font-weight: bolder;
      }
      .detail-body-button{
        flex: 1;
        .el-button{
          color: rgba(10, 31, 55, 1);
          margin-left: 50%;
          transform: translateX(-50%);
          background-color: #fff;
        }
      }
      .detail-body-img{
        flex: 1;
        img{
          width: 25px;
          height: auto;
          margin-left: 50%;
          transform: translateX(-50%);
        }
      }
    }
    .detail-body-data{
      flex: 7;
      margin-left: 35px;
      display: flex;
      flex-direction: column;
      .detail-data-first,
      .detail-data-second{
        flex: 1;
        display: flex;  
        .store-data{
        flex: 1;
      }
      }
    }
  }
  .detail-box-footer{
    flex: 2;
    display: flex;
    .detail-footer-button{
      margin-top: 5px;
      margin-left: 50%;
      transform: translateX(-50%);
    }
  }
  .detail-body-isAI{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    .detail-body{
      width: 100%;
      height: 200px;
      img{
        width: 150px;
        height: auto;
        margin-left: 50%;
        transform: translateX(-50%);
      }
      div{
        font-size: 12px;
        margin-left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
.tittle{
  font-size: 18px;
  margin-left: 8px;
  font-weight: bold;
}
.tittle-content{
  font-size: 14px;
  font-weight: bold;
  color: rgba(10, 31, 55, 1);
  margin-left: 6px;
  background-image: url('@/assets/tittle-content.png');
  background-repeat: repeat-x;
  padding-bottom: 0;
  background-position: left bottom;
}
.data-name{
  font-size: 12px;
  color: rgba(10, 31, 55, 0.6);
}
.data-value{ 
  font-size: 20px;
  color: rgba(0, 0, 0, 0.9);
  font-weight: bolder;
  margin-top: 5px;
}
</style>
